JavaScript+Flask 实现视频上传的简单demo

2024-01-23 22:42| 来源: 网络整理| 查看: 265

前言

需求说明

在网页上选择本地视频并上传到后端服务器后端接收到视频后存储到本地，然后进行处理

技术栈：

前端采用原生HTML+JavaScript

后端采用Flask框架

前端代码

操作步骤：

选中视频文件获取文件内容及文件名将文件内容和文件名封装到一个FormData对象中发起请求，将文件上传到后端服务器

完整代码如下：

有关FormData的使用参考：FormData 对象的使用 - Web API 接口参考 | MDN

视频上传上传视频 function upload() { let videoUpload = document.getElementById('video') let video = videoUpload.files[0] let formData = new FormData() formData.append('video', file) //文件 formData.append('name', file.name) //文件名 let xhr = new XMLHttpRequest() xhr.open('POST', 'http://10.241.4.160:5000/upload', true) xhr.responseType = 'text' //响应类型 xhr.onload = function () { if (xhr.status === 200) { console.log(xhr.response); //响应内容 (上传成功/文件已存在) } else { console.error('请求失败，状态码：' + xhr.status); } }; xhr.send(formData) } 后端代码

操作步骤：

接收前端传来的请求参数根据文件名判断当前文件是否已经存在如果不存在则保存文件，如果存在则不进行任何操作

完整代码如下：

from flask import Flask, request, jsonify from flask_cors import CORS app = Flask(__name__) CORS(app, supports_credentials=True) #允许所有来源的跨域请求 # 文件上传 @app.route('/upload', methods=["POST"]) def upload(): file = request.files['file'].stream.read() #视频文件 name = request.form['name'] #文件名(注意是表单格式) print(video_exist(name)) if not video_exist(name): # 保存视频文件到本地 file_path = os.getcwd() + '\\videos\\' + name with open(file_path,'ab') as f: f.write(file) return '上传成功' else: return '文件已经存在' # 判断文件是否存在 def video_exist(video_name): path = os.getcwd() + '\\videos\\' video_path = os.path.join(path,video_name) return os.path.isfile(video_path) if __name__ == '__main__': app.run()

后续的视频处理可以考虑使用cv2来进行，例如通过cv2.VideoCapture(path)方法来读取指定路径的视频文件

【本文地址】

公司简介

联系我们